<template>
  <div class="healthcheck-container">
    <div class="header">
      <h3>健康检测</h3>
    </div>

    <div class="data-input-card">
      <h4>填写健康数据</h4>
      <el-form :model="healthData" label-position="top">
        <el-form-item label="记录日期">
          <el-date-picker v-model="healthData.recordDate" type="date" placeholder="选择日期" style="width: 100%;" />
        </el-form-item>
        <el-form-item label="身高 (cm)">
          <el-input-number v-model="healthData.height" :min="0" :max="250" controls-position="right" />
        </el-form-item>
        <el-form-item label="体重 (kg)">
          <el-input-number v-model="healthData.weight" :min="0" :max="300" controls-position="right" />
        </el-form-item>
        <el-form-item label="收缩压 (mmHg)">
          <el-input-number v-model="healthData.systolicPressure" :min="0" :max="300" controls-position="right" />
        </el-form-item>
        <el-form-item label="舒张压 (mmHg)">
          <el-input-number v-model="healthData.diastolicPressure" :min="0" :max="200" controls-position="right" />
        </el-form-item>
        <el-form-item label="血糖 (mmol/L)">
          <el-input-number v-model="healthData.bloodSugar" :min="0" :max="50" :precision="1" :step="0.1"
            controls-position="right" />
        </el-form-item>
        <el-form-item label="心率 (次/分钟)">
          <el-input-number v-model="healthData.heartRate" :min="0" :max="200" controls-position="right" />
        </el-form-item>
        <el-form-item label="体温 (℃)">
          <el-input-number v-model="healthData.temperature" :min="30" :max="45" :precision="1" :step="0.1"
            controls-position="right" />
        </el-form-item>
        <el-form-item label="健康内容摘要">
          <el-input v-model="healthData.content" type="textarea" :rows="3" placeholder="请输入健康内容的简要描述" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="healthData.notes" type="textarea" :rows="2" placeholder="请输入其他备注信息 (可选)" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="submitHealthData">
            提交检测数据
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="hover" class="history-card" @click="goToHistory">
      <div class="history-card-content">
        <el-icon class="history-icon">
          <Clock />
        </el-icon>
        <span>查看历史检测记录</span>
        <el-icon class="arrow-icon">
          <ArrowRight />
        </el-icon>
      </div>
    </el-card>

    <el-card shadow="hover" class="report-card" v-if="analysisReport">
      <h4>智能分析报告</h4>
      <div class="report-section">
        <div class="report-item">
          <span class="label">BMI:</span>
          <span class="value" :class="getBmiStatusClass(analysisReport.bmi)">
            {{ analysisReport.bmi }}
          </span>
          <span class="status-text">{{ getBmiStatusText(analysisReport.bmi) }}</span>
        </div>
        <div class="report-item">
          <span class="label">血压状态:</span>
          <span class="value" :class="getBloodPressureStatusClass(analysisReport.bloodPressureStatus)">
            {{ analysisReport.bloodPressureStatus }}
          </span>
        </div>
        <div class="report-item">
          <span class="label">血糖状态:</span>
          <span class="value" :class="getBloodSugarStatusClass(healthData.bloodSugar)">
            {{ healthData.bloodSugar }}
          </span>
          <span class="status-text">{{ getBloodSugarStatusText(healthData.bloodSugar) }}</span>
        </div>
        <div class="report-item">
          <span class="label">心率状态:</span>
          <span class="value" :class="getHeartRateStatusClass(healthData.heartRate)">
            {{ healthData.heartRate }}
          </span>
          <span class="status-text">{{ getHeartRateStatusText(healthData.heartRate) }}</span>
        </div>
      </div>
      <div class="report-suggestions">
        <p><strong>健康建议:</strong></p>
        <p>{{ analysisReport.suggestions }}</p>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ArrowRight, Clock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { submitHealthDataApi } from '../api/healthcheck'

const router = useRouter()
const healthData = reactive({
  recordDate: new Date(),
  height: null,
  weight: null,
  systolicPressure: null,
  diastolicPressure: null,
  bloodSugar: null,
  heartRate: null,
  temperature: null,
  recordType: 'HEALTH_CHECK',
  content: '',
  notes: ''
})

const loading = ref(false)
const analysisReport = ref(null)

const getBmiStatusClass = (bmi) => {
  if (bmi < 18.5) return 'status-underweight'
  if (bmi >= 18.5 && bmi < 24) return 'status-normal'
  if (bmi >= 24 && bmi < 28) return 'status-overweight'
  return 'status-obese'
}

const getBmiStatusText = (bmi) => {
  if (bmi < 18.5) return '偏瘦'
  if (bmi >= 18.5 && bmi < 24) return '正常'
  if (bmi >= 24 && bmi < 28) return '超重'
  return '肥胖'
}

const getBloodPressureStatusClass = (status) => {
  switch (status) {
    case '正常血压':
      return 'status-normal'
    case '高血压前期':
    case '高血压':
      return 'status-high'
    case '低血压':
      return 'status-low'
    default:
      return ''
  }
}

const getBloodSugarStatusClass = (bloodSugar) => {
  if (bloodSugar < 3.9 || bloodSugar > 7.8) return 'status-high-low' // 假设3.9-7.8为正常范围
  return 'status-normal'
}

const getBloodSugarStatusText = (bloodSugar) => {
  if (bloodSugar < 3.9) return '偏低'
  if (bloodSugar > 7.8) return '偏高'
  return '正常'
}

const getHeartRateStatusClass = (heartRate) => {
  if (heartRate < 60 || heartRate > 100) return 'status-high-low' // 假设60-100为正常范围
  return 'status-normal'
}

const getHeartRateStatusText = (heartRate) => {
  if (heartRate < 60) return '偏缓'
  if (heartRate > 100) return '偏快'
  return '正常'
}

const submitHealthData = async () => {
  if (Object.values(healthData).some(val => val === null || val === '')) {
    ElMessage.warning('请填写所有健康数据')
    return
  }

  loading.value = true
  try {
    const dataToSend = { ...healthData }
    if (dataToSend.systolicPressure !== null && dataToSend.diastolicPressure !== null) {
      dataToSend.bloodPressure = `${dataToSend.systolicPressure}/${dataToSend.diastolicPressure}`
    }
    delete dataToSend.systolicPressure
    delete dataToSend.diastolicPressure

    const res = await submitHealthDataApi(dataToSend)
    if (res && res.data) {
      ElMessage.success('健康数据提交成功，报告已生成')
      analysisReport.value = res.data
    } else {
      ElMessage.error(res.message || '健康数据提交失败')
    }
  } catch (error) {
    console.error('提交健康数据失败:', error)
    ElMessage.error('提交健康数据失败，请重试')
  } finally {
    loading.value = false
  }
}

const goToHistory = () => {
  router.push('/healthcheck/history')
}
</script>

<style scoped>
.healthcheck-container {
  padding: 15px;
  background-color: #f7f8fa;
}

.header {
  text-align: left;
  margin-bottom: 25px;
}

.header h3 {
  font-size: 24px;
  color: #333;
}

.data-input-card {
  background-color: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
}

.data-input-card h4 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #2e8b57;
  font-size: 20px;
}

.data-input-card .el-button {
  width: 100%;
  background-color: #2e8b57;
  border-color: #2e8b57;
  border-radius: 10px;
  height: 45px;
  font-size: 16px;
  margin-top: 15px;
}

.history-card {
  background-color: #fff;
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
  cursor: pointer;
}

.history-card-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  color: #2e8b57;
  font-weight: 500;
}

.history-icon {
  font-size: 24px;
  margin-right: 10px;
}

.arrow-icon {
  font-size: 20px;
  color: #999;
}

.report-card {
  background-color: #e0ffe0;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  border-left: 5px solid #2e8b57;
}

.report-card h4 {
  margin-top: 0;
  color: #2e8b57;
  font-size: 18px;
  margin-bottom: 15px;
}

.report-section {
  margin-bottom: 15px;
}

.report-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.report-item .label {
  font-weight: bold;
  color: #333;
  min-width: 80px;
}

.report-item .value {
  margin-left: 10px;
  font-weight: bold;
}

.report-item .status-text {
  margin-left: 10px;
  font-size: 13px;
  color: #666;
}

.status-normal {
  color: #2e8b57;
}

.status-underweight,
.status-low {
  color: #ff9800;
  /* 橙色 */
}

.status-overweight,
.status-obese,
.status-high {
  color: #f56c6c;
  /* 红色 */
}

.status-high-low {
  color: #ff9800;
  /* 血糖/心率偏高或偏低的橙色 */
}

.report-suggestions p {
  font-size: 15px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 0;
}

:deep(.el-input-number__increase, .el-input-number__decrease) {
  border-radius: 0 10px 10px 0 !important;
}

:deep(.el-input__wrapper) {
  border-radius: 10px !important;
  box-shadow: 0 0 0 1px #dcdfe6 inset !important;
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #2e8b57 inset !important;
}

/* 针对el-date-picker的调整 */
:deep(.el-date-editor.el-input__wrapper) {
  border-radius: 10px !important;
  box-shadow: 0 0 0 1px #dcdfe6 inset !important;
}

:deep(.el-date-editor.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #2e8b57 inset !important;
}

:deep(.el-form-item__label) {
  font-size: 15px;
  color: #333;
  margin-bottom: 5px !important;
}
</style>
